<template>
  <scroll-view class="kg-scroll-view-custom" enable-back-to-top="true" scroll-y
      refresher-enabled="true" :refresher-triggered="showRefreshLoading"
      refresher-default-style="none"
      @scrolltoupper="scrolltoupper"
      @refresherpulling="refresherpulling"
      @refresherrestore="refresherrestore"
      @refresherabort="refresherabort"
      @refresherrefresh="refresherrefresh1" @scrolltolower="scrolltolower">
    <view class="dropdown-box" :class="{'dropdown-box-transition': loading}" :style="dropdownStyle">
      <view v-if="!loading" class="iconfont icon-shuaxin" :style="dropdownIconStyle"></view>
      <view v-else class="iconfont icon-loading" :style="dropdownIconStyle"></view>
      <text>{{dropdownText}}</text>
    </view>
    <slot :list="list"></slot>

    <kg-page-footer :show-loading="isShowFooterLoading" :show-no-more="isShowFooterNoMore"></kg-page-footer>
    <kg-empty-box class="kg-full" v-if="!initLoading && list.length === 0"></kg-empty-box>
  </scroll-view>
</template>

<script>
/**
  自定义下拉内容时，原来的刷新区域高度依然存在，虽然设置的提示信息高度一致
  在做高度过度动画时会有影响，默认的区域没有过度动画，所以自定义时，不用加过度动画。
**/
export default {
  props: {
    pageSize: {
      type: Number,
      default: 15,
    },
    // 超过n条数据展示没有更多的提示
    showNoMoreMinLength: {
      type: Number,
      default: 10,
    },
    query: {
      type: Object,
      deault: () => {
        return {}
      },
    },
    getDataFunc: {
      type: Function,
    },
  },
  data () {
    return {
      dropdownHeight: 0,
      dropdownMinHeight: 45, // 自定义下拉刷新阈值

      showRefreshLoading: false,
      initLoading: true, // 初始化加载的标识
      loading: false,
      currentPage: 0,
      total: 0,
      list: [],
      isShowFooterLoading: false,
      isShowFooterNoMore: false,
    }
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pageSize)
    },
    dropdownStyle () {
      return `height: ${this.dropdownHeight}px;`
    },
    dropdownIconStyle () {
      const maxDeg = 390
      let rotate = this.dropdownHeight / this.dropdownMinHeight * maxDeg
      if (rotate > maxDeg) {
        rotate = maxDeg
      }
      return `transform: rotate(${rotate}deg)`
    },
    dropdownText () {
      if (this.dropdownHeight === this.dropdownMinHeight && this.loading) {
        return '正在刷新'
      } else if (this.dropdownHeight >= this.dropdownMinHeight) {
        return '松开立即刷新'
      } else if (this.dropdownHeight < this.dropdownMinHeight && this.dropdownHeight > 0) {
        return '下拉可以刷新'
      }
      return ''
    },
  },
  watch: {
    query () {
      this.refresh()
    },
  },
  mounted () {
    this.getData()
  },
  methods: {
    scrolltoupper () {
      // console.log('滚动到顶部')
    },
    refresherpulling (e) {
      this.dropdownHeight = e.target.deltaY
      console.log('被下拉', e.target.deltaY)
    },
    refresherrestore () {
      // showRefreshLoading设置为false时触发，一般在请求接口完成后设置
      this.dropdownHeight = 0
      console.log('被复位')
    },
    refresherabort () {
      // 拉动高度小于
      this.dropdownHeight = 0
      console.log('被中止')
    },

    // 在组建中不能命名 refresherrefresh、scrolltolower事件名不能命名为 onPullDownRefresh、 onReachBottom，会报错
    //  下拉被触发
    refresherrefresh1 (e) {
      console.log('refreshxxxxxxxa', e)
      this.dropdownHeight = 45
      this.refresh()
    },
    //  滚动到底部被触发
    scrolltolower () {
      this.getData()
    },

    refresh () {
      this.currentPage = 0
      this.getData(true)
    },
    // 第一次onLoad时请求用getData()方法，refresh()会将showRefreshLoading设置为true,顶部出现加载样式
    getData (isRefresh = false) {
      if (this.loading || (this.currentPage > 0 && this.currentPage >= this.pages)) {
        return
      }
      // 只有下拉刷新时，设置showRefreshLoading, showRefreshLoading会控制顶部加载框是否显示
      if (isRefresh) {
        this.showRefreshLoading = true
      }
      const query = Object.assign({
        offset: this.currentPage * this.pageSize,
        limit: this.pageSize,
      }, this.query)

      this.loading = true
      this.setFooter()
      uni.showNavigationBarLoading()
      const isShowRequestLoading = !this.initLoading && isRefresh
      this.getDataFunc(query, isShowRequestLoading).then(({ items, count }) => {
        this.currentPage++
        this.total = count
        const list = items
        if (!isRefresh) {
          this.list.push(...list)
        } else {
          this.list = list
        }
      }).finally(() => {
        if (this.initLoading) {
          this.initLoading = false
        }
        this.showRefreshLoading = false
        this.loading = false
        this.setFooter()
        uni.hideNavigationBarLoading()
      })
    },
    setFooter () {
      let isShowFooterLoading = false
      let isShowFooterNoMore = false
      if (this.initLoading || (this.loading && this.currentPage > 0 && this.currentPage !== this.pages)) {
        isShowFooterLoading = true
      }
      if (!this.loading && this.list.length > this.showNoMoreMinLength && this.currentPage === this.pages) {
        isShowFooterNoMore = true
      }
      this.isShowFooterLoading = isShowFooterLoading
      this.isShowFooterNoMore = isShowFooterNoMore
    },
  },
}
</script>

<style lang="scss">
.kg-scroll-view-custom{
  flex: 1;
  width:100%;
  overflow: hidden;
  position: relation;
  .dropdown-box{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: $uni-bg-color-grey;
    @include flex-center();
    overflow: hidden;
    .iconfont{
      width: 60rpx;
      height: 60rpx;
    }
    .icon-loading{
      font-size: 50rpx;
      animation: kg-rotate 1.5s linear infinite;
    }
    text{
      padding: 20rpx 0;
      color: $uni-text-color-placeholder;
    }
  }
  // .dropdown-box-transition{
  //   transition: height 300ms;
  // }
}
</style>
